<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>专辑管理</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        .layui-btn-container {
            margin-bottom: 15px;
        }
        .album-status {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-online {
            background-color: #f0f9eb;
            color: #67c23a;
        }
        .status-offline {
            background-color: #fdf6ec;
            color: #e6a23c;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">专辑管理</div>
        <div class="layui-card-body">
            <!-- 工具栏 -->
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal" id="addAlbumBtn">
                    <i class="layui-icon layui-icon-add-circle"></i> 添加专辑
                </button>
            </div>
            
            <!-- 表格 -->
            <table id="albumTable" lay-filter="albumFilter"></table>
        </div>
    </div>
</div>

<!-- 专辑详情对话框 -->
<div id="detailDialog" style="display: none; padding: 20px;">
    <table class="layui-table" lay-skin="nob">
        <tr>
            <td rowspan="4">
                <img id="albumPic" src="" height="120px" alt="专辑封面">
            </td>
            <td colspan="2">
                <h2><span id="albumName"></span></h2>
            </td>
        </tr>
        <tr>
            <td>歌手: <span id="albumSinger"></span></td>
            <td>状态: <span id="albumStatus"></span></td>
        </tr>
        <tr>
            <td>唱片公司: <span id="albumCompany"></span></td>
            <td>发行时间: <span id="albumPublishTime"></span></td>
        </tr>
    </table>
</div>

<!-- 操作栏自定义模板 -->
<script id="albumBar" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs" lay-event="detail">
            <i class="layui-icon layui-icon-detail"></i> 查看详情
        </button>
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i> 编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </button>
    </div>
</script>

<!-- 状态自定义模板 -->
<script id="statusTpl" type="text/html">
    {{#  if(d.status == 1){ }}
    <span class="album-status status-online">上架</span>
    {{#  } else { }}
    <span class="album-status status-offline">下架</span>
    {{#  }}}
</script>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'form', 'jquery'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        
        // 渲染表格
        var albumTable = table.render({
            elem: '#albumTable',
            url: '/album/list',
            page: true,
            limit: 10,
            limits: [5, 10, 20, 50],
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'name', title: '专辑名称', width: 200},
                {field: 'singer', title: '歌手', width: 150},
                {field: 'company', title: '唱片公司', width: 180},
                {field: 'publishTime', title: '发行时间', width: 160, templet: function(d){return d.publishTime ? new Date(d.publishTime).toLocaleDateString() : '';}},
                {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
                {title: '操作', width: 200, templet: '#albumBar', fixed: 'right'}
            ]],
            response: {
                statusCode: 0 // 成功状态码
            },
            parseData: function(res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.count,
                    "data": res.data
                };
            }
        });
        
        // 添加专辑按钮点击事件
        $('#addAlbumBtn').click(function() {
            window.location.href = 'album-add.html';
        });
        
        // 监听表格行工具事件
        table.on('tool(albumFilter)', function(obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                // 查看详情
                showAlbumDetail(data.id);
            } else if (obj.event === 'edit') {
                // 编辑专辑
                window.location.href = 'album-add.html?id=' + data.id;
            } else if (obj.event === 'del') {
                // 删除专辑
                layer.confirm('确定要删除该专辑吗？删除后将无法恢复！', function(index) {
                    $.ajax({
                        url: '/album/delete',
                        type: 'DELETE',
                        data: {id: data.id},
                        success: function(res) {
                            if (res.success) {
                                layer.msg('删除成功', {icon: 1});
                                albumTable.reload();
                            } else {
                                layer.msg(res.message || '删除失败', {icon: 5});
                            }
                        },
                        error: function() {
                            layer.msg('网络错误，请稍后重试', {icon: 5});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        
        // 显示专辑详情
        function showAlbumDetail(albumId) {
            $.ajax({
                url: '/album/details',
                type: 'GET',
                data: {id: albumId},
                success: function(res) {
                    if (res.success) {
                        var album = res.data;
                        // 填充详情信息
                        $('#albumName').text(album.name || '');
                        $('#albumSinger').text(album.singer || '');
                        $('#albumCompany').text(album.company || '');
                        $('#albumPublishTime').text(album.publishTime ? new Date(album.publishTime).toLocaleDateString() : '');
                        $('#albumStatus').text(album.status === 1 ? '上架' : '下架');
                        $('#albumPic').attr('src', album.pic || '../res/images/default_album.jpg');
                        
                        // 打开详情对话框
                        layer.open({
                            type: 1,
                            title: '专辑详情',
                            content: $('#detailDialog'),
                            area: ['600px', '400px']
                        });
                    } else {
                        layer.msg(res.message || '获取专辑详情失败', {icon: 5});
                    }
                },
                error: function() {
                    layer.msg('网络错误，请稍后重试', {icon: 5});
                }
            });
        }
    });
</script>
</body>
</html>
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-list"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>


</body>
</html>